<template>
  <div>
    <import-dialog
      ref="importDialogRef"
      :file-types="['xlsx', 'xls']"
      :import-url="importUrl"
      :template-api-url="templateApiUrl"
      :template-file-name="templateFileName"
      :template-url="templateUrl"
      :title="'批量导入' + (isExternalUser ? '外部人员' : '用户')"
      @close="handleClose"
      @success="handleImportSuccess"
    />
  </div>
</template>

<script lang="ts" setup>
import { ElMessage } from 'element-plus'
import { computed, ref } from 'vue'
import ImportDialog from '/@/components/ImportDialog/index.vue'

const props = defineProps({
  isExternalUser: {
    type: Boolean,
    default: false,
  },
})

const emit = defineEmits(['success', 'close'])

const importDialogRef = ref()

// 根据是否为外部用户，设置不同的API路径
const importUrl = computed(() => {
  return '/api/user/import'
})

const templateApiUrl = computed(() => {
  return '/api/user/import/template'
})

// 作为备选的静态模板URL
const templateUrl = computed(() => {
  return props.isExternalUser ? '/templates/external_user_template.xlsx' : '/templates/user_template.xlsx'
})

// 下载的文件名
const templateFileName = computed(() => {
  return props.isExternalUser ? '外部人员导入模板.xlsx' : '用户导入模板.xlsx'
})

// 处理导入成功
const handleImportSuccess = () => {
  ElMessage.success(`批量导入${props.isExternalUser ? '外部人员' : '用户'}成功`)
  emit('success')
}

// 处理关闭
const handleClose = () => {
  emit('close')
}

// 打开导入对话框
const open = () => {
  importDialogRef.value?.open()
}

// 对外暴露方法
defineExpose({
  open,
})
</script>
